//ZcAdmin mixins
//===============

//Changes the color and the hovering properties of the navbar
.navbar-variant(@color; @font-color: rgba(255, 255, 255, 0.8); @hover-color: #f6f6f6; @hover-bg: rgba(0, 0, 0, 0.1)) {
  background-color: @color;
  //Navbar links
  .nav > li > a {
    color: @font-color;
    padding-top:20px;
    padding-bottom:20px;
  }

  .nav > li > a:hover,
  .nav > li > a:active,
  .nav > li > a:focus,
  .nav .open > a,
  .nav .open > a:hover,
  .nav .open > a:focus,
  .nav > .active > a {
    background: #3d4247;
    color: @hover-color;
  }

  //Add color to the sidebar toggle button
  .sidebar-toggle {
    color: @font-color;
    &:hover {
      color: @hover-color;
      background: @hover-bg;
    }
  }
}

//Logo color variation
.logo-variant(@bg-color; @color: #fff; @border-bottom-color: transparent; @border-bottom-width: 0) {
  background-color: @bg-color;
  color: @color;
  border-bottom: @border-bottom-width solid @border-bottom-color;

  &:hover {
    background-color: #3d4247;
  }
}

//Box solid color variantion creator
.box-solid-variant(@color; @text-color: #fff) {
  border: 1px solid @color;
  > .box-header {
    color: @text-color;
    background: @color;
    background-color: @color;
    a,
    .btn {
      color: @text-color;
    }
  }
}

//Direct Chat Variant
.direct-chat-variant(@bg-color; @color: #fff) {
  .right > .direct-chat-text {
    background: @bg-color;
    border-color: @bg-color;
    color: @color;
    &:after,
    &:before {
      border-left-color: @bg-color;
    }
  }
}

//border radius creator
.border-radius(@radius) {
  border-radius: @radius;
}

//Different radius each side
.border-radius(@top-left;
@top-right
;
@bottom-left
;
@bottom-right
)
{
  border-top-left-radius: @top-left
;
  border-top-right-radius: @top-right
;
  border-bottom-right-radius: @bottom-right
;
  border-bottom-left-radius: @bottom-left
;
}

//Gradient background
.gradient(@color: #F5F5F5, @start: #EEE, @stop: #FFF) {
  background: @color;
  background: -webkit-gradient(linear,
  left bottom,
  left top,
  color-stop(0, @start),
  color-stop(1, @stop));
  background: -ms-linear-gradient(bottom,
  @start,
  @stop);
  background: -moz-linear-gradient(center bottom,
  @start 0%,
  @stop 100%);
  background: -o-linear-gradient(@stop,
  @start);
  filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@stop,@start));
}

//Dark Sidebar Mixin
.skin-dark-sidebar(@link-hover-border-color) {
  // Sidebar background color (Both .wrapper and .left-side are responsible for sidebar bg color)
  .wrapper,
  .main-sidebar,
  .left-side {
    background-color: @sidebar-dark-bg;
  }
  //User Panel (resides in the sidebar)
  .user-panel {
    > .info, > .info > a {
      color: #fff;
    }
  }
  //Sidebar Menu. First level links
  .sidebar-menu > li {
    //Section Headning
    &.header {
      color: lighten(@sidebar-dark-bg, 20%);
      background: darken(@sidebar-dark-bg, 4%);
    }
    //links
    > a {
      border-left: 3px solid transparent;
    }
    //Hover and active states
    &:hover > a, &.active > a {
      color: @sidebar-dark-hover-color;
      background: @sidebar-dark-hover-bg;
      border-left-color: #3d4247;
    }
    //First Level Submenu
    > .treeview-menu {
      margin: 0 1px;
      background: @sidebar-dark-submenu-bg;
    }
  }
  //All links within the sidebar menu
  .sidebar a {
    color: @sidebar-dark-color;
    &:hover {
      text-decoration: none;
    }
  }
  //All submenus
  .treeview-menu {
    > li {
      > a {
        color: @sidebar-dark-submenu-color;
      }
      &.active > a, > a:hover {
        color: @sidebar-dark-submenu-hover-color;
      }
    }
  }
  //The sidebar search form
  .sidebar-form {
    .border-radius(3px);
    border: 1px solid lighten(@sidebar-dark-bg, 10%);
    margin: 10px 10px;
    input[type="text"], .btn {
      box-shadow: none;
      background-color: lighten(@sidebar-dark-bg, 10%);
      border: 1px solid transparent;
      height: 35px;
      //.transition(all @transition-speed @transition-fn);
    }
    input[type="text"] {
      color: #666;
      .border-radius(2px, 0, 2px, 0);
      &:focus,
      &:focus + .input-group-btn .btn {
        background-color: #fff;
        color: #666;
      }
      &:focus + .input-group-btn .btn {
        border-left-color: #fff;

      }
    }
    .btn {
      color: #999;
      .border-radius(0, 2px, 0, 2px);
    }
  }
}

//Light Sidebar Mixin
.skin-light-sidebar(@link-hover-border-color) {
  // Sidebar background color (Both .wrapper and .left-side are responsible for sidebar bg color)
  .wrapper,
  .main-sidebar,
  .left-side {
    background-color: #222;
  }
  //User Panel (resides in the sidebar)
  .user-panel {
    > .info, > .info > a {
      color: #fff;
    }
  }
  //Sidebar Menu. First level links
  .sidebar-menu > li {
    //Section Headning
    &.header {
      color: lighten(@sidebar-dark-bg, 20%);
      background: darken(@sidebar-dark-bg, 4%);
    }
    //links
    > a {
      border-left: 3px solid transparent;
    }
    //Hover and active states
    &:hover > a, &.active > a {
      color: @sidebar-dark-hover-color;
      background: @sidebar-dark-hover-bg;
      border-left-color: #3d4247;
    }
    //First Level Submenu
    > .treeview-menu {
      margin: 0 1px;
      background: @sidebar-dark-submenu-bg;
    }
  }
  //All links within the sidebar menu
  .sidebar a {
    color: @sidebar-dark-color;
    &:hover {
      text-decoration: none;
    }
  }
  //All submenus
  .treeview-menu {
    > li {
      > a {
        color: @sidebar-dark-submenu-color;
      }
      &.active > a, > a:hover {
        color: @sidebar-dark-submenu-hover-color;
      }
    }
  }
  //The sidebar search form
  .sidebar-form {
    .border-radius(3px);
    border: 1px solid lighten(@sidebar-dark-bg, 10%);
    margin: 10px 10px;
    input[type="text"], .btn {
      box-shadow: none;
      background-color: lighten(@sidebar-dark-bg, 10%);
      border: 1px solid transparent;
      height: 35px;
      //.transition(all @transition-speed @transition-fn);
    }
    input[type="text"] {
      color: #666;
      .border-radius(2px, 0, 2px, 0);
      &:focus,
      &:focus + .input-group-btn .btn {
        background-color: #fff;
        color: #666;
      }
      &:focus + .input-group-btn .btn {
        border-left-color: #fff;

      }
    }
    .btn {
      color: #999;
      .border-radius(0, 2px, 0, 2px);
    }
  }
}

// 内容区域皮肤（蓝色）
.blue-box-content-color(@link-hover-border-color){
  .box {
    background: #ffffff;
    border-top: 3px solid @blue-box-default-border-top-color;
    box-shadow: @box-boxshadow;
    color: #444;
    // Box color variations
    &.box-primary {
      border-top-color: @light-blue;
    }

    &.box-default {
      border-top-color: @gray;
    }

    .nav-stacked {
      > li {
        border-bottom: 1px solid @box-border-color;
      }
    }

    //SOLID BOX
    //---------
    //use this class to get a colored header and borders
    &.box-solid {
      border-top: 0;
      > .box-header {
        .btn.btn-default {
          background: transparent;
        }
        .btn,
        a {
          &:hover {
            background: rgba(0, 0, 0, 0.1);
          }
        }
      }

      // Box color variations
      &.box-default {
        .box-solid-variant(@gray, #444);
      }
      &.box-primary {
        .box-solid-variant(@light-blue);
      }
      &.box-info {
        .box-solid-variant(@aqua);
      }
      &.box-danger {
        .box-solid-variant(@red);
      }
      &.box-warning {
        .box-solid-variant(@yellow);
      }
      &.box-success {
        .box-solid-variant(@green);
      }

      > .box-header > .box-tools .btn {
        border: 0;
        box-shadow: none;
      }

      // Fix font color for tiles
      &[class*='bg'] {
        > .box-header {
          color: #fff;
        }
      }

    }
  }

  .box,
  .overlay-wrapper {
    .overlay {
      background: rgba(255, 255, 255, 0.7);
      .border-radius(@box-border-radius);
      > .fa {
        color: #000;
      }
    }
  }

  .box-header {
    color: #444;

    //Add bottom border
    &.with-border {
      border-bottom: 1px solid @blue-box-border-color;
    }
  }

  //Box Body
  .box-body {
    .border-radius(0; 0; @box-border-radius; @box-border-radius);
    padding: @box-padding;

    .fc {
      margin-top: 5px;
    }
  }
  //Box footer
  .box-footer {
    .border-radius(0; 0; @box-border-radius; @box-border-radius);
    border-top: 1px solid @blue-box-border-color;
    padding: @box-padding;
    background-color: @box-footer-bg;
  }

  //添加
  .form-control {
    border-color: #d2d6de;
    background-color: #fff;
  }
  .form-control:focus {
    border-color: #00bdf3;
  }
  .content-header {
    color: #fff;
  }
  .content-header a {
    color: #fff;
  }
  .content-headerlist {
    background: #fff;
    box-shadow: 1px 1px 2px #f5f5f5;
  }
  .content-headerlist li {
    border-bottom: 1px solid #bebebe;
  }
  .content-headerlist li a {
    color: #4d585e;
  }
  .btn-group .btn-link {
    color: #fff;
  }
  .btn-group .btn-link:hover {
    background: #fff;
    color: #444;
  }
  .content .btn-menu .btn-link {
    color: #444;
  }
  .content .btn-menu i.fa {
    color: #444;
  }
  .content .btn-menu .btn-link:hover {
    background: #2e80ab;
    color: #fff;
  }
  .content .btn-menu .btn-link:hover i.fa {
    color: #fff;
  }
  .content .box-body > form .box-header.with-border {
    border-color: #797979;
  }
  .content .box-body > form h6 {
    color: #333;
  }
  .required-mark {
    color: red;
  }
  .suggest-message {
    background: #575b60;
    color: #fff;
  }
  .suggest {
    color: #fff;
    background-color: #333;
  }
  .suggest:after {
    border-top: 12px solid #333;
  }
  .suggest-basic:after {
    border-bottom: 12px solid #333;
  }
  .tips {
    color: #323232;
  }
  .tips-content {
    background: #333;
    color: #fff;
  }
  .tips-content:after {
    border-top: 12px solid #333;
  }
}

// 内容区域皮肤（白色）
.white-box-content-color(@link-hover-border-color){
  .box {
    background: #ffffff;
    border-top: 3px solid @white-box-default-border-top-color;
    box-shadow: @box-boxshadow;
    color: #444;
    // Box color variations
    &.box-primary {
      border-top-color: @light-blue;
    }

    &.box-default {
      border-top-color: #d4d7df;
    }

    .nav-stacked {
      > li {
        border-bottom: 1px solid @white-box-border-color;
      }
    }

    //SOLID BOX
    //---------
    //use this class to get a colored header and borders
    &.box-solid {
      border-top: 0;
      > .box-header {
        .btn.btn-default {
          background: transparent;
        }
        .btn,
        a {
          &:hover {
            background: rgba(0, 0, 0, 0.1);
          }
        }
      }

      // Box color variations
      &.box-default {
        .box-solid-variant(@gray, #444);
      }
      &.box-primary {
        .box-solid-variant(@light-blue);
      }
      &.box-info {
        .box-solid-variant(@aqua);
      }
      &.box-danger {
        .box-solid-variant(@red);
      }
      &.box-warning {
        .box-solid-variant(@yellow);
      }
      &.box-success {
        .box-solid-variant(@green);
      }

      > .box-header > .box-tools .btn {
        border: 0;
        box-shadow: none;
      }

      // Fix font color for tiles
      &[class*='bg'] {
        > .box-header {
          color: #fff;
        }
      }

    }
  }

  .box,
  .overlay-wrapper {
    .overlay {
      background: rgba(255, 255, 255, 0.7);
      .border-radius(@box-border-radius);
      > .fa {
        color: #000;
      }
    }
  }

  .box-header {
    color: #444;

    //Add bottom border
    &.with-border {
      border-bottom: 1px solid @white-box-border-color;
    }
  }

  //Box Body
  .box-body {
    .border-radius(0; 0; @box-border-radius; @box-border-radius);
    padding: @box-padding;

    .fc {
      margin-top: 5px;
    }
  }
  //Box footer
  .box-footer {
    .border-radius(0; 0; @box-border-radius; @box-border-radius);
    border-top: 1px solid @white-box-border-color;
    padding: @box-padding;
    background-color: @box-footer-bg;
  }

  //添加
  .form-control {
    border-color: #b8b8b8;
    background-color: #fff;
  }
  .form-control:focus {
    border-color: #00bdf3;
  }
  .content-header {
    color: #444;
  }
  .content-header a {
    color: #444;
  }
  .content-headerlist {
    background: #fff;
    box-shadow: 1px 1px 2px #f5f5f5;
  }
  .content-headerlist li {
    border-bottom: 1px solid #bebebe;
  }
  .content-headerlist li a {
    color: #4d585e;
  }
  .btn-group .btn-link {
    color: #444;
  }
  .btn-group .btn-link:hover {
    background: #fff;
    color: #444;
  }
  .content .btn-menu .btn-link {
    color: #444;
  }
  .content .btn-menu i.fa {
    color: #444;
  }
  .content .btn-menu .btn-link:hover {
    background: #e6e6e6;
    color: #2d3239;
  }
  .content .btn-menu .btn-link:hover i.fa {
    color: #2d3239;
  }
  .content .box-body > form .box-header.with-border {
    border-color: #797979;
  }
  .content .box-body > form h6 {
    color: #333;
  }
  .required-mark {
    color: red;
  }
  .suggest-message {
    background: #575b60;
    color: #fff;
  }
  .suggest {
    color: #fff;
    background-color: #333;
  }
  .suggest:after {
    border-top: 12px solid #333;
  }
  .suggest-basic:after {
    border-bottom: 12px solid #333;
  }
  .tips {
    color: #323232;
  }
  .tips-content {
    background: #333;
    color: #fff;
  }
  .tips-content:after {
    border-top: 12px solid #333;
  }
}

// 内容区域皮肤（黑色）
.black-box-content-color(@link-hover-border-color){
  .box {
    background: #242424;
    border-top: 3px solid @black-box-default-border-top-color;
    box-shadow: @box-boxshadow;
    color: #fff;
    // Box color variations
    &.box-primary {
      border-top-color: @light-blue;
    }

    &.box-default {
      border-top-color: #666;
    }

    .nav-stacked {
      > li {
        border-bottom: 1px solid @black-box-border-color;
      }
    }

    //SOLID BOX
    //---------
    //use this class to get a colored header and borders
    &.box-solid {
      border-top: 0;
      > .box-header {
        .btn.btn-default {
          background: transparent;
        }
        .btn,
        a {
          &:hover {
            background: rgba(0, 0, 0, 0.1);
          }
        }
      }

      // Box color variations
      &.box-default {
        .box-solid-variant(@gray, #444);
      }
      &.box-primary {
        .box-solid-variant(@light-blue);
      }
      &.box-info {
        .box-solid-variant(@aqua);
      }
      &.box-danger {
        .box-solid-variant(@red);
      }
      &.box-warning {
        .box-solid-variant(@yellow);
      }
      &.box-success {
        .box-solid-variant(@green);
      }

      > .box-header > .box-tools .btn {
        border: 0;
        box-shadow: none;
      }

      // Fix font color for tiles
      &[class*='bg'] {
        > .box-header {
          color: #fff;
        }
      }

    }
  }

  .box,
  .overlay-wrapper {
    .overlay {
      background: rgba(255, 255, 255, 0.7);
      .border-radius(@box-border-radius);
      > .fa {
        color: #000;
      }
    }
  }

  .box-header {
    color: #fff;

    //Add bottom border
    &.with-border {
      border-bottom: 1px solid @black-box-border-color;
    }
  }

  //Box Body
  .box-body {
    .border-radius(0; 0; @box-border-radius; @box-border-radius);
    padding: @box-padding;

    .fc {
      margin-top: 5px;
    }
  }
  //Box footer
  .box-footer {
    .border-radius(0; 0; @box-border-radius; @box-border-radius);
    border-top: 1px solid @black-box-border-color;
    padding: @box-padding;
    background-color: @box-footer-bg;
  }

  //添加
  .form-control {
    border-color: #5f5f5f;
    background-color: #242424;
    color:#fff;
  }
  .form-control:focus {
    border-color: #00bdf3;
  }
  .content-header {
    color: #fff;
  }
  .content-header a {
    color: #fff;
  }
  .content-headerlist {
    background: #fff;
    box-shadow: 1px 1px 2px #f5f5f5;
  }
  .content-headerlist li {
    border-bottom: 1px solid #bebebe;
  }
  .content-headerlist li a {
    color: #4d585e;
  }
  .btn-group .btn-link {
    color: #fff;
  }
  .btn-group .btn-link:hover {
    background: #fff;
    color: #444;
  }
  .content .btn-menu .btn-link {
    color: #fff;
  }
  .content .btn-menu i.fa {
    color: #fff;
  }
  .content .btn-menu .btn-link:hover {
    background: #fff;
    color: #333;
  }
  .content .btn-menu .btn-link:hover i.fa {
    color: #333;
  }
  .content .box-body > form .box-header.with-border {
    border-color: #797979;
  }
  .content .box-body > form h6 {
    color: #fff;
  }
  .required-mark {
    color: red;
  }
  .suggest-message {
    background: #575b60;
    color: #fff;
  }
  .suggest {
    color: #fff;
    background-color: #3b3b3b;
  }
  .suggest:after {
    border-top: 12px solid #333;
  }
  .suggest-basic:after {
    border-bottom: 12px solid #333;
  }
  .tips {
    color: #323232;
  }
  .tips-content {
    background: #333;
    color: #fff;
  }
  .tips-content:after {
    border-top: 12px solid #333;
  }
}

//右侧控制菜单皮肤（蓝色和白的）
.blue-right-sidebar-color(@link-hover-border-color){
  .control-sidebar-dark {
    color: @sidebar-dark-color;
    // Background
    &,
    + .control-sidebar-bg {
      background: @sidebar-dark-bg;
    }
    // Sidebar tabs
    .nav-tabs.control-sidebar-tabs {
      border-bottom: darken(@sidebar-dark-bg, 3%);
      > li {
        > a {
          background: darken(@sidebar-dark-bg, 5%);
          color: @sidebar-dark-color;
          //Hover and active states
          &,
          &:hover,
          &:focus {
            border-left-color: darken(@sidebar-dark-bg, 7%);
            border-bottom-color: darken(@sidebar-dark-bg, 7%);
          }
          &:hover,
          &:focus,
          &:active {
            background: darken(@sidebar-dark-bg, 3%);
          }
          &:hover {
            color: #fff;
          }
        }
        //Active state
        &.active {
          > a {
            &,
            &:hover,
            &:focus,
            &:active {
              background: @sidebar-dark-bg;
              color: #fff;
            }
          }
        }
      }
    }
    //Heading & subheading
    .control-sidebar-heading,
    .control-sidebar-subheading {
      color: #fff;
    }
    //Sidebar list
    .control-sidebar-menu {
      > li {
        > a {
          &:hover {
            background: @sidebar-dark-hover-bg;
          }
          .menu-info {
            > p {
              color: @sidebar-dark-color;
            }
          }
        }
      }
    }
  }
}

//右侧控制菜单皮肤（黑色）
.black-right-sidebar-color(@link-hover-border-color){
  .control-sidebar-dark {
    color: @sidebar-dark-color;
    // Background
    &,
    + .control-sidebar-bg {
      background: #222;
    }
    // Sidebar tabs
    .nav-tabs.control-sidebar-tabs {
      border-bottom: darken(@sidebar-dark-bg, 3%);
      > li {
        > a {
          background: darken(@sidebar-dark-bg, 5%);
          color: @sidebar-dark-color;
          //Hover and active states
          &,
          &:hover,
          &:focus {
            border-left-color: darken(@sidebar-dark-bg, 7%);
            border-bottom-color: darken(@sidebar-dark-bg, 7%);
          }
          &:hover,
          &:focus,
          &:active {
            background: darken(@sidebar-dark-bg, 3%);
          }
          &:hover {
            color: #fff;
          }
        }
        //Active state
        &.active {
          > a {
            &,
            &:hover,
            &:focus,
            &:active {
              background: #222;
              color: #fff;
            }
          }
        }
      }
    }
    //Heading & subheading
    .control-sidebar-heading,
    .control-sidebar-subheading {
      color: #fff;
    }
    //Sidebar list
    .control-sidebar-menu {
      > li {
        > a {
          &:hover {
            background: @sidebar-dark-hover-bg;
          }
          .menu-info {
            > p {
              color: @sidebar-dark-color;
            }
          }
        }
      }
    }
  }
}

// 点击更多皮肤（蓝色和白色）
.blue-more-color(@link-hover-border-color){
  @media (max-width: 767px) {
    .click-display {
      background: #fff;
      box-shadow: inset -1px -1px 1px #2e80ab;
    }
  }
  @media (min-width: 767px) {
    .click-display {
      background: #fff;
      box-shadow: inset -1px -1px 1px #2e80ab;
    }
  }
  .click-display .btn{
    background: #fff;
  }
  .hidden-span {
    background: #fff;
    transition: background .3s;
    box-shadow: inset -1px 0 0 #2e80ab;
  }
  .hidden-span:hover {
    background: #ba141a;
    transition: background .3s;
  }
  .hidden-ul {
    color: #ccc;
  }
  .hidden-ul li {
    color: #2d3239;
  }
  .hidden-ul li:hover {
    background: #e6e6e6;
  }
  .display-red {
    color: #ffb900;
  }
  .click-display-foot {
    background-color: #e6e6e6;
    color: #252525;
  }
  .div-new-foot {
    background-color: #e6e6e6;
    color: #252525;
  }
  .ui-tooltip {
      background: #3d4247;
      color: white;
  }
  .arrow {
      border-right: 16px solid #3d4247;
  }
  .new {
      border-top: 1px solid #3d4247;
      border-bottom: 1px solid #3d4247;
  }
}

// 点击更多皮肤（黑色）
.black-more-color(@link-hover-border-color){
  @media (max-width: 767px) {
    .click-display {
      background: #252525;
      box-shadow: inset -1px -1px 1px #2e80ab;
    }
  }
  @media (min-width: 767px) {
    .click-display {
      background: #252525;
      box-shadow: inset -1px -1px 1px #2e80ab;
    }
  }
  .click-display .btn{
    color: #fff;
  }
  .hidden-span {
    background: #252525;
    transition: background .3s;
    box-shadow: inset -1px 0 0 #2e80ab;
  }
  .hidden-span:hover {
    background: #ba141a;
    transition: background .3s;
  }
  .hidden-ul {
    color: #ccc;
  }
  .hidden-ul li {
    color: #fff;
  }
  .hidden-ul li:hover {
    background: #3b3b3b;
  }
  .display-red {
    color: #ffb900;
  }
  .click-display-foot {
    background-color: #212121;
    color: #fff;
  }
  .div-new-foot {
    background-color: #212121;
    color: #fff;
  }
  .ui-tooltip {
      background: #3d4247;
      color: white;
  }
  .arrow {
      border-right: 16px solid #3d4247;
  }
  .new {
      border-top: 1px solid #3d4247;
      border-bottom: 1px solid #3d4247;
  }
}

// 浏览历史皮肤（蓝色和白色）
.blue-history-color(@link-hover-border-color){
  .nav-browse-history-ul {
    background-color: #fff;
    box-shadow: 2px 2px 2px;
  }
  .nav-browse-history-ul li:hover {
    background-color:#e6e6e6;
  }
  .chevron_down_ul_span_active {
    color:#00abec;
  }
}

// 浏览历史皮肤（黑色）
.black-history-color(@link-hover-border-color){
  .nav-browse-history-ul {
    background-color: #252525;
    box-shadow: 2px 2px 2px;
  }
  .nav-browse-history-ul li {
    color: #fff;
  }
  .nav-browse-history-ul li:hover {
    background-color:#3b3b3b;
  }
  .chevron_down_ul_span_active {
    color:#00abec;
  }
}